<template>
  <div class="home">
    <audio controls="controls" ref="audio" class="video"></audio>
    <el-button @click="startAudio" type="success" :disabled="!isStart">开始录音</el-button>
    <el-button @click="stopAudio" type="danger" :disabled="!isStop">停止录音</el-button>
  </div>
</template>

<script>
import Recorder from 'js-audio-recorder'
export default {
  name: 'home',
  data() {
    return {
      isStart: true,
      isStop: false,
      recorder: null,
      videoMp4: null,
      sourceBuffer: null,
      sourceBufferArr: [],
      mimeCodec: 'audio/mpeg',
      timestampOffset: -0.07,
      appendWindowStart: 0,
      appendWindowEnd: 0.9
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.videoMp4 = this.$refs.audio
      this.recorder = new Recorder()
      this.recorder.onprocess = () => {
        const blob = this.recorder.getPCMBlob()
        const reader = new FileReader()
        // a.readAsDataURL(blob)
        reader.readAsArrayBuffer(blob)
        reader.onload = e => {
          const result = e.target.result
          console.log(result)
          // this.sourceBuffer.timestampOffset = this.timestampOffset
          // this.sourceBuffer.appendWindowStart = this.appendWindowStart
          // this.sourceBuffer.appendWindowEnd = this.appendWindowEnd
          // this.appendWindowStart += 0.899
          // this.timestampOffset = this.appendWindowStart - 0.07
          // this.appendWindowEnd += 0.899
          // this.sourceBuffer.appendBuffer(result)
          // this.sourceBufferArr.push(result)
        }
      }
      // 媒体资源
      if ('MediaSource' in window && MediaSource.isTypeSupported(this.mimeCodec)) {
        const mediaSource = new MediaSource()
        this.videoMp4.src = URL.createObjectURL(mediaSource)
        mediaSource.addEventListener('sourceopen', e => {
          if (e.target.readyState === 'open') {
            URL.revokeObjectURL(this.videoMp4.src)
            let _mediaSource = e.target
            let sourceBuffer = _mediaSource.addSourceBuffer(this.mimeCodec)
            sourceBuffer.addEventListener('updateend', () => {
              if (!sourceBuffer.updating && _mediaSource.readyState === 'open') {
                // mediaSource.endOfStream()
              }
            })
            this.sourceBuffer = sourceBuffer
          } else {
            console.log('mediaSource is open fail!')
          }
        })
      } else {
        console.log(`Oh, my Good your brwoer not surport MediaSource or ${this.mimeCodec}!`)
      }
    })
  },
  methods: {
    startAudio() {
      this.recorder.start().then(() => {
        this.isStop = true
        this.isStart = false
        console.log(`start recorder at: ${new Date().toLocaleString()}`)
      })
    },
    stopAudio() {
      this.isStop = false
      this.isStart = true
      this.timestampOffset = -0.07
      this.appendWindowStart = 0
      this.appendWindowEnd = 0.9
      this.recorder.stop()
    }
  }
}
</script>

<style lang="scss" scoped>
  .home {
    margin-left: 20px;
    width: 100%;
    height: 100%;
    .video {
      display: block;
      margin-bottom: 10px;
      height: 80px;
    }
    .canvas {
      width: 100%;
      height: 100%;
    }
  }
</style>
